/**Web Storage */
// storage类型
// Storage是一种在Web浏览器中存储数据的机制，它可以用于存储各种类型的数据，如字符串、数字、对象、数组等。Storage的类型包括以下几种：

// Local Storage：Local Storage是一种在客户端存储数据的机制，它可以用于存储小量数据，
// 如用户偏好设置、购物车信息等。Local Storage的存储容量为5-10MB，数据只在当前浏览器窗口中有效。

// Session Storage：Session Storage是一种在客户端存储数据的机制，它可以用于存储小量数据，
// 如用户身份验证信息、会话数据等。Session Storage的存储容量为5-10MB，数据在当前浏览器窗口关闭后自动删除。

// Cookies：Cookies是一种在客户端存储数据的机制，它可以用于存储小量数据，如用户身份验证信息、
// 购物车信息等。Cookies的存储容量为4KB，数据在浏览器关闭后自动删除。

// Web Storage API：Web Storage API是一种在客户端存储数据的机制，它可以用于存储小量数据，
// 如用户身份验证信息、购物车信息等。Web Storage API的存储容量为5-10MB，数据在浏览器关闭后自动删除。

// IndexedDB：IndexedDB是一种在客户端存储大量数据的机制，它可以用于存储结构化数据，
// 如用户数据、商品信息等。IndexedDB的存储容量为无限，数据可以被多次访问。

// 在Web开发中，可以使用不同的Storage类型来存储不同类型的数据，以便在不同的场景下使用。
// 例如，可以使用Local Storage来存储用户偏好设置、使用Session Storage来存储用户身份验证信息、使用Cookies来存储购物车信息等。

/**storage方法 */
localStorage.setItem(key, value)//：将指定键值对存储到Local Storage中。

localStorage.getItem(key)//：从Local Storage中获取指定键的值。

localStorage.removeItem(key)//：从Local Storage中删除指定键的值。

localStorage.clear()//：从Local Storage中删除所有键值对。

sessionStorage.setItem(key, value)//：将指定键值对存储到Session Storage中。

sessionStorage.getItem(key)//：从Session Storage中获取指定键的值。

sessionStorage.removeItem(key)//：从Session Storage中删除指定键的值。

sessionStorage.clear()//：从Session Storage中删除所有键值对。

document.cookie//：获取或设置Cookie的值。

/**存储事件 */
domain//存储变化对应的域
key//被设置或删除的键
newValue//键被设置的新值
oldValue//键变化之前的值
//使用方式
window.addEventListener('storage', (e) => {
    console.log(e.domain);
})



/**IndexedDB使用 */
// 打开或创建一个名为"myDatabase"的数据库
var request = indexedDB.open("myDatabase", 1);

// 数据库打开/创建成功时的回调
request.onsuccess = function (event) {
    var db = event.target.result;
    // 在这里可以进行数据库操作，比如存储数据或检索数据
};

// 数据库打开/创建失败时的回调
request.onerror = function (event) {
    console.log("数据库打开失败");
};

// 数据库升级时的回调，用于定义数据库结构
request.onupgradeneeded = function (event) {
    var db = event.target.result;
    // 创建一个名为"customers"的对象存储空间，用于存储客户数据
    var objectStore = db.createObjectStore("customers", { keyPath: "id" });
    // 创建一个名为"name"的索引，用于快速检索客户姓名
    objectStore.createIndex("name", "name", { unique: false });
};



/**对象存储 */
// 打开或创建一个名为"myDatabase"的数据库
var request = indexedDB.open("myDatabase", 1);

// 数据库打开/创建成功时的回调
request.onsuccess = function (event) {
    var db = event.target.result;
    // 开始一个事务，并指定对象存储空间为"customers"
    var transaction = db.transaction(["customers"], "readwrite");
    // 获取名为"customers"的对象存储空间
    var objectStore = transaction.objectStore("customers");

    // 添加一条数据到对象存储空间
    var customer = { id: 1, name: "John", email: "john@example.com" };
    var request = objectStore.add(customer);

    // 添加数据成功时的回调
    request.onsuccess = function (event) {
        console.log("数据添加成功");
    };

    // 创建一个名为"name"的索引，用于快速检索客户姓名，第一个参数为索引名称，第二个参数为索引属性名称，第三个参数是包含键unique的options对象
    objectStore.createIndex("name", "name", { unique: false });

    // 使用索引进行数据检索
    var index = objectStore.index("name");
    var getRequest = index.get("John");

    // 获取数据成功时的回调
    getRequest.onsuccess = function (event) {
        var result = event.target.result;
        console.log("检索到的数据:", result);
    };
};

// 数据库打开/创建失败时的回调
request.onerror = function (event) {
    console.log("数据库打开失败");
};


/**并发问题 */
// 两个不同浏览器打开了同一个标签页，数据修改可能会出现问题
// onversionchange
// 在IndexedDB中，onversionchange事件是一个非常重要的事件，它在数据库版本号发生变化时触发。
// 当浏览器检测到IndexedDB数据库的版本号发生变化时，会触发这个事件，开发者可以在事件处理程序中执行相应的操作，
// 比如关闭旧版本的数据库连接，打开新版本的数据库连接，或者进行数据迁移等操作。

// 下面是一个简单的示例代码，演示了如何使用onversionchange事件来处理数据库版本号变化的情况：

// 打开或创建一个名为"myDatabase"的数据库，并指定版本号为1
var request = indexedDB.open("myDatabase", 1);

// 数据库版本号变化时的事件处理程序
request.onupgradeneeded = function (event) {
    var db = event.target.result;
    // 执行数据库升级操作，比如创建新的对象存储空间或索引
};

// 数据库打开/创建成功时的事件处理程序
request.onsuccess = function (event) {
    var db = event.target.result;
    // 数据库打开成功，可以进行数据操作
};

// 数据库版本号变化时的事件处理程序
request.onversionchange = function (event) {
    // 数据库版本号发生变化，可以在这里执行相应的操作，比如关闭旧版本的数据库连接
    db.close();
};
//不同浏览器之前存在差异，标准化还是参照谷歌浏览器方式运行代码